<template>
	<view class="order-page bgimg3">
		<u-sticky :bgColor="scrollTop > 20?'#110124':'transparent'" customNavHeight="0" offsetTop="0" class="z-index">
			<u-navbar :title="$t('hhh.t87')" :autoBack="false" bg-color="transparent" leftIconColor="#ffffff"
				:titleStyle="{'color':'#ffffff'}" @leftClick="leftClick"></u-navbar>
			<u-gap height="100" bgColor="transparent"></u-gap>

			<u-tabs :list="topTab" lineWidth="30" lineHeight="6" lineColor="#E97AFF" :scrollable="false" :activeStyle="{
			    color: '#E97AFF',
			    fontWeight: 'bold',
			    transform: 'scale(1.05)'
			}" :inactiveStyle="{
			    color: 'rgba(255, 255, 255, 1)',
			    transform: 'scale(1)'
			}" itemStyle="height: 34px;" @change="changeTab"></u-tabs>
			<u-gap height="20" bgColor="transparent"></u-gap>
		</u-sticky>


		<u-gap height="50" bgColor="transparent"></u-gap>

		<view class="rounded-lg bg-white p-3">
			<view class="rounded-lg bgF3F5FA px-2 py-3 mb-3" v-for="(item,index) in dataList" :key="index">
				<view class="flex align-center justify-between border-bottom pb-3">
					<text class="ft999999 fs-22">{{$t('hhh.t99')}}：{{item.payment_no}}</text>
					<text class="ftE97AFF fs-26 font-weight-bold" v-if="item.status === -1">{{$t('hhh.t213')}}</text>
					<text class="ftE97AFF fs-26 font-weight-bold" v-if="item.status === 1">{{$t('hhh.t100')}}</text>
					<text class="ftE97AFF fs-26 font-weight-bold" v-if="item.status === 2">{{$t('hhh.t101')}}t</text>
					<text class="ftE97AFF fs-26 font-weight-bold" v-if="item.status === 4">{{$t('hhh.t102')}}</text>
					<text class="ftE97AFF fs-26 font-weight-bold" v-if="item.status === 5">{{$t('hhh.t103')}}</text>
					<text class="ftE97AFF fs-26 font-weight-bold" v-if="item.status === 6">{{$t('hhh.t104')}}</text>
				</view>
				<view class="flex align-center bgF3F5FA py-3"
					@tap="navTo(`/pages/order/orderdetails?id=${item.order_id}&status=${item.status}`)">
					<image class="rounded" :src="item.peipei.heading" mode="aspectFill" style="width: 176rpx;height: 176rpx;">
					</image>
					<view class="flex flex-column flex-1 ml-2">
						<view class="flex align-center">
							<text class="fs-32 text-black font-weight-light">{{item.peipei.nickname}}</text>
							<image v-if="item.peipei.is_verified === 1" src="/static/imgs/renzheng.png" mode="aspectFill"
								class="w-32 h-32 ml-1">
							</image>
							<image v-if="item.peipei.nationality && item.peipei.nationality.logo" :src="item.peipei.nationality.logo"
								mode="aspectFill" class="w-32 h-32 ml-1 rounded-circle flex-shrink"></image>
							<view class="flex align-center bgFF4CBE rounded-circle px-1 ml-1">
								<image :src="`/static/imgs/${item.peipei.gender === 2?'sex':'sex1'}.png`" mode="aspectFill"
									style="width: 20rpx;height: 20rpx;"></image>
								<text class="text-white fs-20">{{item.peipei.age}}</text>
							</view>
							<view class="flex align-center flex-1 justify-end">
								<image src="/static/imgs/hot_icon.png" mode="aspectFill" class="w-36 h-36"></image>
								<text class="ftFF685E fs-26 font-weight-light">{{abbreviateNumber(item.peipei.fire_balance)}}</text>
							</view>
						</view>
						<view class="flex align-center mt-2">
							<view class="rounded px-1 py-1 bgD5EDF8 flex align-center ">
								<image :src="item.interests[0].icon" mode="aspectFill" class="w-32 h-32"></image>
								<text class="ft666666 fs-22 ml-1">{{item.interests[0].name}}</text>
							</view>
						</view>
						<view class="flex align-center justify-between mt-3">
							<view class="flex align-center">
								<view class="flex align-center ftFF0073">
									<text class="fs-34 font-weight-light">{{item.price}}</text>
									<image src="/static/imgs/jinbi.png" mode="aspectFill" class="w-28 h-28 mx-1"></image>
								</view>
								<text class="fs-24 text-black letter-spacing ml-1">/ {{$t('hhh.t7')}}</text>
							</view>
							<text class="ft666666 fs-28">x{{item.hours}}</text>
						</view>
					</view>
				</view>
				<view class="flex align-center justify-end border-top py-3"
					@tap="navTo(`/pages/order/orderdetails?status=${item.status}`)">
					<text class="text-black fs-28">{{$t('hhh.t93')}}:</text>
					<text class="ftFF0073 fs-34 font-weight-bold mx-1">{{item.actual_amount}}</text>
					<image src="/static/imgs/jinbi.png" mode="aspectFill" class="w-28 h-28"></image>
				</view>
				<view class="flex align-center text-white fs-28 font-weight-bold justify-end">
					<view v-if="item.status ==1" class="bg110124 rounded-circle px-3 py-2" @tap="cancelOrder(item)">
						{{$t('hhh.t212')}}
					</view>
					<view v-if="item.status == 5" class="bg110124 rounded-circle px-3 py-2" @tap="requestshowFn(item)">
						{{$t('hhh.t117')}}
					</view>
					<view v-if="item.status === 2" class="bg110124 rounded-circle px-3 py-2 ml-2" @tap="payNow(item)">
						{{$t('hhh.t95')}}
					</view>
					<view v-if="item.status === 4" class="bg110124 rounded-circle px-3 py-2 ml-2" @tap="startImmediately(item)">
						{{$t('hhh.t96')}}
					</view>
					<view v-if="item.status === 5" class="bg110124 rounded-circle px-3 py-2 ml-2" @tap="completeshowFn(item)">
						{{$t('hhh.t97')}}
					</view>
					<view v-if="item.status === 6 && item.is_rated === 0" class="bg110124 rounded-circle px-3 py-2 ml-2"
						@tap="leaveshowFn(item)">
						{{$t('hhh.t98')}}
					</view>
				</view>
			</view>

			<nodata v-if="dataList.length === 0"></nodata>

		</view>

		<u-modal :show="completeshow" :title="$t('hhh.t97')" :showCancelButton="true" :cancelText="$t('hhh.t26')"
			:confirmText="$t('hhh.t24')" @cancel="completeshow = false" @confirm="confirmComplete">
			<view class="fs-32 text-center pt-5">Are you sure you want to complete the order?</view>
		</u-modal>

		<u-modal :show="payshow" title="Pay now" :showCancelButton="true" :cancelText="$t('hhh.t26')"
			:confirmText="$t('hhh.t24')" @cancel="payshow = false" @confirm="confirmPay">
			<view class="fs-32 text-center pt-5">Are you sure to pay now?</view>
		</u-modal>

		<u-popup :show="requestshow" :round="10" mode="center">
			<view class="position-relative p-4 box-sizing" style="width: 600rpx;">
				<view class="fs-32 font-weight-bold text-black text-center">{{$t('hhh.t117')}}</view>

				<view class="bgF6F7F9 rounded-lg  px-2 py-1 mt-5">
					<u--textarea height="100" v-model="info.reason"
						placeholder="Please enter the reason for after-sales request"></u--textarea>
				</view>

				<view class="bgF6F7F9 rounded-lg px-2 py-1 mt-3">
					<u--input placeholder="Please enter your contact information" border="surround" v-model="info.contact"
						:customStyle="{
						'border':0
					}"></u--input>
				</view>

				<u-gap height="80" bgColor="transparent"></u-gap>
				<view class="flex align-center justify-center donebtn mx-auto text-white fs-28 font-weight-bold"
					@tap="requestconfirm">{{$t('hhh.t31')}}
				</view>

				<image class="position-absolute closeicon" src="/static/imgs/close.png" mode="aspectFill"
					@tap="requestshow = false"></image>
			</view>
		</u-popup>

		<u-popup :show="leaveshow" :round="10" mode="center">
			<view class="position-relative p-4 box-sizing" style="width: 600rpx;">
				<view class="fs-32 font-weight-bold text-black text-center">Leave a Star Rating</view>
				<u-gap height="80" bgColor="transparent"></u-gap>
				<view class="flex align-center justify-center">
					<u-rate count="5" v-model="rate" minCount="1" activeColor="#FFCC2C" inactiveColor="#DDE1E6"
						size="50"></u-rate>
				</view>

				<u-gap height="80" bgColor="transparent"></u-gap>
				<view class="flex align-center justify-center donebtn mx-auto text-white fs-28 font-weight-bold"
					@tap="leaveconfirm">Submit</view>

				<image class="position-absolute closeicon" src="/static/imgs/close.png" mode="aspectFill"
					@tap="leaveshow = false"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		abbreviateNumber
	} from '@/utils/common.js'
	import HttpApi from '@/api/httpApi';
	export default {
		data() {
			return {
				curIndex: -1,
				dataList: [],
				tempList: [],
				info: {
					reason: '',
					contact: ''
				},
				completeshow: false,
				requestshow: false,
				leaveshow: false,
				rate: 1,
				scrollTop: 0,
				page: 1,
				payshow: false,
				currentOrder: {}
			}
		},
		computed: {
			topTab() {
				return [{
						name: this.$t('hhh.t171'),
						status: -1
					},
					{
						name: this.$t('hhh.t172'),
						status: 1
					},
					{
						name: this.$t('hhh.t173'),
						status: 5
					},
					{
						name: this.$t('hhh.t174'),
						status: 6
					},
				]
			},
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onReachBottom() {
			if (this.tempList.length < 20) return
			this.page++
			this.orderIndex()
		},
		created() {
			this.orderIndex()
		},
		methods: {
			abbreviateNumber,
			cancelOrder(item) {
				HttpApi.orderCancel({
					order_id: item.order_id
				}).then(res => {
					if (res.code === 1) {
						uni.showToast({
							title: this.$t('hhh.t112')
						})
						this.page = 1
						this.orderIndex()
					}
				})
			},
			requestshowFn(item) {
				this.currentOrder = item
				this.requestshow = true
			},
			requestconfirm() {
				if (!this.info.contact) {
					uni.$tools.toast(this.$t('hhh.t184'))
					return
				}
				if (!this.info.reason) {
					uni.$tools.toast(this.$t('hhh.t185'))
					return
				}
				HttpApi.orderFeedback({
					contact: this.info.contact,
					content: this.info.reason,
					order_id: this.currentOrder.order_id
				}).then(res => {
					if (res.code === 1) {
						uni.$tools.toast(this.$t('hhh.t116'))
						this.requestshow = false
						this.orderIndex()
					}
				})
			},
			orderIndex() {
				const data = {
					page: this.page,
					limit: 20,
				}
				if (this.curIndex > -1) {
					data.status = this.curIndex
				}
				uni.showLoading()
				HttpApi.orderIndex(data).then(res => {
					if (res.code === 1) {
						const list = res.data.data
						this.tempList = list
						if (this.page === 1) {
							this.dataList = list
						} else {
							this.dataList = this.dataList.concat(list)
						}
					}
				}).finally(() => {
					uni.hideLoading()
				})
			},
			changeTab(val) {
				this.curIndex = val.status
				this.page = 1
				this.orderIndex()
			},
			completeshowFn(item) {
				this.currentOrder = item
				this.completeshow = true
			},
			confirmComplete() {
				HttpApi.orderFinish({
					order_id: this.currentOrder.order_id
				}).then(res => {
					if (res.code === 1) {
						uni.$tools.toast(this.$t('hhh.t114'))
						this.completeshow = false
						this.orderIndex()
					}
				})
			},
			leaveshowFn(item) {
				this.currentOrder = item
				this.leaveshow = true
			},
			leaveconfirm() {
				HttpApi.orderRate({
					order_id: this.currentOrder.order_id,
					score: this.rate
				}).then(res => {
					if (res.code === 1) {
						uni.$tools.toast(this.$t('hhh.t114'))
						this.leaveshow = false
						this.orderIndex()
					}
				})

			},
			payNow(item) {
				this.currentOrder = item
				this.payshow = true
			},
			confirmPay() {
				HttpApi.paywithbalance({
					order_id: this.currentOrder.order_id
				}).then(res => {
					if (res.code === 1) {
						uni.$tools.toast(this.$t('hhh.t113'))
						this.payshow = false
						this.orderIndex()
					}
				})
			},
			startImmediately(item) {
				HttpApi.orderStart({
					order_id: item.order_id
				}).then(res => {
					if (res.code === 1) {
						uni.$tools.toast(this.$t('hhh.t114'))
						this.orderIndex()
					}
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.order-page {}
</style>